<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <select name="province" id="province">
        <option value="-1">请选择</option>
    </select>
    <select name="city" id="city">
        <option value="-1">请选择</option>
    </select>
    <select name="country" id="country">
        <option value="-1">请选择</option>
    </select>
    <script>
      // 省份数组
      var provinceArr = ['上海', '江苏', '河北'];
      // 城市数组
      var cityArr = [
        ['上海市'],
        ['苏州市', '南京市', '扬州市'],
        ['石家庄', '秦皇岛', '张家口']
       ];
      // 区域数组
      var countryArr = [
        [
          ['黄浦区', '静安区', '长宁区', '浦东区']
        ], [
          ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
          ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
          ['邗江区', '广陵区', '江都区']
        ], [
          ['长安区', '桥西区', '新华区', '井陉矿区'],
          ['海港区', '山海关区', '北戴河区', '抚宁区'],
          ['桥东区', '桥西区', '宣化区', '下花园区']
        ]
      ];
      //1.将数据添加到province中
      let province=document.getElementById('province');
       let city=document.getElementById('city');
       let country=document.getElementById('country');
      for(let i=0;i<provinceArr.length;i++){
          let option=new Option(provinceArr[i],i);
          province.options.add(option);
      }
      province.onchange=function(e){
          console.log(province.value);
         city.options.lenght = 1;//清空
          //当省份发生变化时触发,添加城市
          let citys=cityArr[province.value];
        for(let i=0;i<citys.length;i++){
          let option=new Option(citys[i],i);
          city.options.add(option);
        }
        //清空城区选项
        country.options.lenght =1;
      }
      city.onchange=function(e){
          country.options.lenght = 1;//清空
          //去响应城市的改变
          //1.找到城区数组
        let countrys=countryArr[province.value][city.value];
            for(let i=0;i<countrys.length;i++){
            let option=new Option(countrys[i],i);
            country.options.add(option);
            }
        }
   /*   let option=new Option("上海");
      let option2=new Option("江苏");
      province.options.add(option);
      province.options.add(option2);
      */
    </script>
</body>
</html>